<template>
	<view >
		<!-- 搜索框 -->
		<view class="search1">
			<view class="search">
				<image src="../../static/搜索@3x.png"></image>
				<span>搜索</span>
			</view>
			
			<view class="searchText"><span>搜索</span></view>
		</view>
		<!-- 记录内容 -->
		<view v-for=" item in datalist" :key="item.id" class="item">
		
			<view class="content1">
				普通洗车、机油、工时
			</view>
			<view class="content2">
				<text>下单用户: &nbsp;{{item.name}}</text>
				<text>实付金额: &nbsp;￥{{item.age}}</text>
			</view>
			<view class="content3">
				核销时间: &nbsp;{{item.time}}
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist:[
					{id:1,name:'zhangsan',age:13,time:2020},
					{id:2,name:'wangwu',age:11,time:2021}
					]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	/* 搜索框样式 */
	.search1{
		
		position: relative;
	}
	.search {
		
		padding: 4px 0;
		margin: 8px 52px 15px 10px;
		text-align: center;
		font-size: 14px;
		line-height: 20px;
		background-color: #FFFFFF;
		color: rgba(133,133,133,1);
		border-radius: 8px;
		
		
		
	}
	.search image {
		margin-right: 5px;
		width: 14px;
		height: 14px;
		background-color: rgba(204,204,204,1);
	}
	.searchText{
		position: absolute;
		right: 12px;
		top: 2px;
		font-size: 15px;
		color: #1D6FFF;
	}
	/* 记录内容样式 */
	.item{
		margin: 0px 7px 7px 5px;
		padding: 3px 7px;
		background-color: #FFFFFF;
		border-bottom: 2px solid #EFEFEF;
		box-shadow: 0px 0.8px 1px 0px ;
		border-radius: 3px;
	}
	.content1{
		font-size: 16px;
		line-height: 35px;
	}
	.content2{
		font-size: 14px;
		line-height: 30px;
		border-top: 2px solid #EFEFEF;
		border-bottom: 2px solid #EFEFEF;
	}
	.content2 text{
		display: block;
	}
	.content3{
		font-size: 14px;
		line-height: 30px;
	}

</style>
